<template>
	<div class="chartsWrap">
		<div class="chartsWrap">
			<div class="headline">
				<span class="title">
	    	 	 	<i class="el-icon-s-marketing"></i>	    	 	 	
	    	 	 	进程图
	    	 	 </span>
			</div>
			<e-chart :options="option" class="charts"></e-chart>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				option : {
					// backgroundColor: '#031245',
					grid: {
						left: '20%',
						top: '18%',
						bottom: '12%',
						right: '8%'
					},
					xAxis: {
						data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车'],
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 129, 109,.1)',
								width: 1 //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: '#999',
								fontSize: 12
							}
						}
					},
					yAxis: [{
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 129, 109, 0.1)',
								width: 1 //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: '#999'
							}
						},
						splitArea: {
							areaStyle: {
								color: 'rgba(255,255,255,.5)'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255, 129, 109, 0.1)',
								width: 0.5,
								type: 'dashed'
							}
						}
					}],
					series: [{
						type: 'pictorialBar',
						barCategoryGap: '0%',
						symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
						label: {
							show: true,
							position: 'top',
							distance: 15,
							color: '#08DFFE',
							fontWeight: 'bolder',
							fontSize: 15,
						},
						itemStyle: {
							normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: '#9A11FF'
										},
										{
											offset: 1,
											color: '#08DFFE'
										}
									],
									global: false //  缺省为  false
								}
							},
							emphasis: {
								opacity: 1
							}
						},
						data: [76, 60, 25, 18, 12, 9]
					}]
				}
			
		}
	},
	created() {

		},
		beforeDestroy() {

		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped="">
	.chartsWrap {
		height: 100%;
		display: flex;
		flex-direction: column;
		.charts {
			flex: 1;
		}
		.headline {
			display: flex;
			color: #fff;
			.title {
				background: #131420;
				padding: 8px 15px;
				display: inline-block;
				font-size: 14px;
				box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
				border: 1px solid #3591ff80;
			}
		}
	}
</style>